<template>
  <div>
    <el-row class="samples-info-box">
      <s-table
        v-loading="false"
        :column="tableData.column"
        :data="tableData.data"
        :header-cell-class-name="headerCellClass"
        pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :page-sizes="[10,20,30,50]"
        :current-page.sync="dataObjects.current"
        :total="dataObjects.total"
        :page-size="dataObjects.size"
        @size-change="handleSizeChange"
        @p-current-change="handleCurrentChange"
      />
    </el-row>
    <my-dialog
      :dialog-show="dialogShow"
      dialog-type="编辑附件"
      :list-data="listData"
      :contract-classify="contractClassify"
      :single-contract-type="singleContractType"
      :project-contract-type="projectContractType"
      @dialogDisplay="dialogDisplayFa"
    />
    <myDetailDialog :detail-dialog-show="detailDialogShow" :detail-dialog-id="detailDialogId" @dialogVisableplay="detailDialogDisplayFa" />
  </div>
</template>

<script>
import myDialog from './dialog'
import myDetailDialog from './detailDialog'
import sTable from '@/components/STable/s-table'
import * as contractCorrelationApi from '@/api/contractManage/contractCorrelation'
export default {
  components: {
    sTable,
    myDialog,
    myDetailDialog
  },
  props: {
    dataObjects: {
      type: Object,
      required: true
    },
    contractClassify: {
      type: Array,
      default: () => []
    },
    singleContractType: {
      type: Array,
      default: () => []
    },
    projectContractType: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      // 控制编辑表单的显示和隐藏
      dialogShow: false,
      // 控制详情的弹框 的显示和隐藏
      detailDialogShow: false,
      detailDialogId: -1,
      // 点击编辑的单列数据
      listData: {},
      queryData: {
        page: 0,
        pageSize: 10
      },
      // 单列表单
      currentPage: 1,
      total: 10,
      pageSize: 10,
      tableData: {
        column: [
          {
            prop: 'code',
            label: '模板编号',
            width: '200',
            fixed: true,
            render: (h, scope) => {
              return (
                <div
                  onClick={() => {
                    this.openDetail(scope.row.id)
                  }}
                >
                  <a style='color:#CEAB70;cursor:pointer'>{scope.row.code}</a>
                </div>
              )
            }
          },
          {
            prop: 'name',
            label: '模板名称',
            width: '200'
          },
          {
            prop: 'classifyName',
            label: '适用分类',
            width: '200'
          },
          {
            prop: 'typeName',
            label: '适用类型',
            width: '260'
          },
          {
            prop: 'createTime',
            label: '创建日期',
            width: '140',
            // formatter: this.dateFormatter
            render(h, scope) {
              return (
                <span>{scope.row.createTime ? scope.row.createTime.substring(0, 10) : ''}</span>
              )
            }
          },
          {
            prop: 'statusName',
            label: '状态',
            // enabled
            render: (h, scope) => {
              return (
                <div class='samples-table-overflow'>
                  {scope.row.enabled == true ? '启用' : '停用'}
                </div>
              )
            }
          },
          {
            prop: 'createUserName',
            label: '创建人'
          },
          {
            label: '操作',
            fixed: 'right',
            width: '154',
            render: (h, scope) => {
              return (
                <span>
                  <el-popover
                    placement='left'
                    trigger='click'
                    popper-class='s-popover'
                    width='234'>
                    <div style='display:flex;align-items:center;justify-content:center;padding:20px 0;'>
                      <i class='el-icon-question' style='font-size:26px;margin-right:10px;color:#4f9bdb'></i>
                        确定启用此模板吗？
                    </div>
                    <div style='text-align: center; margin: 0'>
                      <el-button size='small' type='primary' plain onClick={ () => { this.handleClosePopover() }}>取 消</el-button>
                      <el-button type='primary' size='small' onClick={ () => { this.handleEnable(scope.row.id) } }>确 认</el-button>
                    </div>
                    <el-button
                      type='text'
                      slot='reference'
                      size='small'
                      v-show= {scope.row.enabled === false}
                      style='margin-right:15px'
                      class='samples-text-button-primary'
                    >启 用</el-button>
                  </el-popover>
                  <el-popover
                    placement='left'
                    trigger='click'
                    popper-class='s-popover'
                    width='234'>
                    <div style='display:flex;align-items:center;justify-content:center;padding:20px 0;'>
                      <i class='el-icon-question' style='font-size:26px;margin-right:10px;color:#e05e5e'></i>
                        确定定停用此模板吗？
                    </div>
                    <div style='text-align: center; margin: 0'>
                      <el-button size='small' type='primary' plain onClick={ () => { this.handleClosePopover() }}>取 消</el-button>
                      <el-button type='primary' size='small' onClick={ () => { this.handleBlock(scope.row.id) } }>确 认</el-button>
                    </div>
                    <el-button
                      type='text'
                      slot='reference'
                      size='small'
                      v-show= {scope.row.enabled === true}
                      style='margin-right:15px'
                      class='samples-text-button-disabled'
                    >停 用</el-button>
                  </el-popover>
                  <el-button
                    type='text'
                    style='margin-right:15px'
                    onClick={() => {
                      this.editBtn(scope.row)
                    }}>编 辑</el-button>
                  <el-popover
                    placement='left'
                    trigger='click'
                    popper-class='s-popover'
                    width='234'>
                    <div style='display:flex;align-items:center;justify-content:center;padding:20px 0;'>
                      <i class='el-icon-question' style='font-size:26px;margin-right:10px;color:#e05e5e'></i>
                        确定删除此模板吗？
                    </div>
                    <div style='text-align: center; margin: 0'>
                      <el-button size='small' type='primary' plain onClick={ () => { this.handleClosePopover() }}>取 消</el-button>
                      <el-button type='primary' size='small' onClick={ () => { this.handleDelete(scope.row.id) } }>确 认</el-button>
                    </div>
                    <el-button
                      type='text'
                      slot='reference'
                      size='small'
                      // v-show= {scope.row.typed === false}
                      class='samples-text-button-disabled'
                    >删 除</el-button>
                  </el-popover>
                </span>
              )
            }
          }
        ],
        data: [],
        options: {
          boundariesElement: 'scrollParent'
        }
      }
    }
  },

  computed: {},

  watch: {
    dataObjects: {
      handler: function(val, oldval) {
        console.log('父组件传过来的值', val)
        if (val != oldval) {
          this.getObj()
        }
      },
      immediate: true, // 关键
      deep: true
    }
  },

  mounted() {
    if (document.addEventListener) {
      // firefox
      document.addEventListener(
        'DOMMouseScroll',
        function() {
          console.log('wheel')
          document.querySelector('#app').click()
        },
        false
      )
    }
    // 滚动滑轮触发scrollFunc方法  //ie 谷歌
    // window.onmousewheel = document.onmousewheel = function() {
    //   console.log('wheel')
    //   document.querySelector('#app').click()
    // }
  },

  methods: {
    // 时间格式化
    dateFormatter(row, column, cellValue, index) {
      if (row.updateTime) {
        row.updateTime.substring(0, 5)
      }

      // str.substring(0,5)
    },
    // 点击展开附件详情
    openDetail(id) {
      this.detailDialogId = id
      this.detailDialogShow = true
    },
    handleClosePopover() {
    //   document.querySelector('#app').click()
      this.$el.click()
    },
    tablecellStyle({ row, column, rowIndex, columnIndex }) {
      // console.log(column)
      if (column.type === 'default') {
        return { 'padding-left': '20px' }
      }
      if (column.type === 'index') {
        return { 'padding-left': '20px' }
      }
    },
    headerCellClass({ row, column, rowIndex, columnIndex }) {
      if (column.type === 'index') {
        return 'indexTableHeaderStyle'
      } else if (column.type === 'selection') {
        return ''
      } else {
        return 'samples-header-cell'
      }
    },
    // 子元素控制的弹出框的显示
    // i元素穿过来的dialog显示
    dialogDisplayFa(val) {
      this.dialogShow = val
    },
    // 详情穿过来的值
    detailDialogDisplayFa(val) {
      this.detailDialogShow = val
    },
    // 点击编辑按钮的时候
    editBtn(data) {
      console.log(data)
      this.dialogShow = true
      this.dialogType = '编辑'
      this.listData = data
    },
    // 点击启用的时候
    handleEnable(id) {
      this.handleClosePopover()
      console.log(id)
      contractCorrelationApi.contractAttachmentTypeOperate({ id: id, enabled: 1 }).then(res => {
        console.log(res.data)
        if (res.code === 1) {
          this.getData()
          this.$notify({
            title: '成功',
            message: '启用成功',
            type: 'success',
            duration: '3000'
          })
        } else {
          this.$notify.error({
            title: '错误',
            message: res.msg,
            duration: '3000'
          })
        }
      })
    },
    // 点击停用按钮的时候
    handleBlock(id) {
      this.handleClosePopover()
      console.log(id)
      contractCorrelationApi.contractAttachmentTypeOperate({ id: id, enabled: 0 }).then(res => {
        console.log(res.data)
        if (res.code === 1) {
          this.getData()
          this.$notify({
            title: '成功',
            message: '停用成功',
            type: 'success',
            duration: '3000'
          })
        } else {
          this.$notify.error({
            title: '错误',
            message: res.msg,
            duration: '3000'
          })
        }
      })
    },
    // 点击删除按钮的时候
    handleDelete(id) {
      this.handleClosePopover()
      console.log(id)
      contractCorrelationApi.contractAttachmentTypeDelete(id).then(res => {
        console.log(res.data)
        if (res.code === 1) {
          this.getData()
          this.$notify({
            title: '成功',
            message: '删除成功',
            type: 'success',
            duration: '3000'
          })
        } else {
          this.$notify.error({
            title: '错误',
            message: res.msg,
            duration: '3000'
          })
        }
      })
    },
    getObj() {
      this.tableData.data = this.dataObjects.records
    },
    getData() {
      // this.tableData.data = this.dataObjects.records
      this.$emit('giveQuery', this.queryData)
    },
    handleSizeChange(val) {
      this.queryData.page = 1
      this.queryData.pageSize = val
      console.log(321)
      this.getData()
    },
    handleCurrentChange(val) {
      this.queryData.page = val
      this.getData()
    }
  }
}
</script>
<style lang='scss' scoped>
</style>
